import React from "react"
export default class Sonlife extends React.Component {
    constructor(props) {
        super()
        // console.log(props)
        this.state = {
            msg:props.name
        }
    }
    //react的生命周期
    componentWillMount(){
        console.log("componentWillMount组件将要挂载在页面上触发");
    }
    render () {
        this.state.msg = this.props.name
        return <div>
            <h1>{this.state.msg}</h1>
        </div>
    }
    componentDidMount(){
        console.log('componentDidMount组件已经挂载在页面上了');
    }
    //只有子组件里面有这个周期,并且当接收props数据时.触发这个生命周期 state不会触发这个钩子函数
    componentWillReceiveProps(){
        //触发这个函数的两个条件:1:一个组件要从父组件接收参数2:如果这个组件第一次存在父组件里面时,不会触发,如果这个组件已经存在于父组件里面才会触发
       console.log('componentWillReceiveProps');
    }
    shouldComponentUpdate () {
        //只有这个周期返回ture时,后面的钩子函数才会执行
        return true
    }
    componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    //render(){....}数据变化时 会执行
    componentDidUpdate() {
        console.log(this.props.name)
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount组件失去挂载在页面上');
    }
}